/* eslint-disable jsx-a11y/alt-text */
import React, { Component } from 'react'
import { Carousel,WhiteSpace,Toast, Modal } from 'antd-mobile';
import { addFavoritesById, deleteFavoritesById, getHousesDataliById, isFavoritesById } from '../../api/index'
import MynavBar from '../../components/MyNavBar/index'
import HouseSupport from '../../components/HouseSupport/index'
// 猜你喜欢
import HouseLtem from '../../components/HouseLtem/index'
// 
import RenderDescription from './components/renderDescription'
import styles from './index.module.scss'
// 组件，函数式组件
import HouseInfo from './components/HouseInfo'
import { isLogin } from '../../utils/auth';
const BMap = window.BMap
// 猜你喜欢后端暂时没有提供接口，我们用静态数据先把结构处理好
const guessData = [
  {
    houseImg: '/newImg/7bjk7dcn4.jpg',
    title: '中海锦城 3室2厅 3400元',
    tags: ['近地铁'],
    price: 3400,
    desc: '三室/113/南/中海锦城',
    houseCode: '5cc44e1f1439630e5b3d353c',
  },
  {
    houseImg: '/newImg/7bjfdalho.jpg',
    title: '整租 · 出租 银河城春晓苑一期 中间楼层，阳光好。',
    tags: ['双卫生间','随时看房','近地铁'],
    price: 1300,
    desc: '三室/63/南|北/银河城春晓苑',
    houseCode: '5cc477061439630e5b467b0b',
  },
  {
    houseImg: '/newImg/7bjk6g1cn.jpg',
    title: '吉祥龙精装三房 有钥匙 看房方便',
    tags: ['近地铁', '随时看房'],
    price: 18000,
    desc: '三室/100/东南/汉森吉祥龙',
    houseCode: '5cc4a1db1439630e5b50220f',
  },
]
export default class HouseDetail extends Component {
 state = {
  coord:{},
  supporting: [], // 渲染房源配置
  guessData,
  isFavorite:false
 }
 async componentDidMount(){
  const { id } = this.props.match.params
  await this.getHousesData(id)
  this.initMap()
  this.getFavorites()
 }
 getFavorites = async () => {
  const { id } = this.props.match.params
  const isAuth =  isLogin()
  if(isAuth){
    const res = await isFavoritesById(id)
    this.setState({isFavorite: res.data.body.isFavorite})
  }
 }
  getHousesData = async(id) =>{
    const res = await getHousesDataliById(id)
    const houseDetail = res.data.body
    console.log(houseDetail);
    this.setState({...houseDetail})
 }
//  轮播图
renderCarousel =() => {
  const { houseImg } = this.state
  return (
    <Carousel className={styles.slider}>
      {houseImg.map(item => 
        <img key={item} src ={process.env.REACT_APP_BASEURL + item} />
      )}
    </Carousel>
    )
}
// 房屋基本信息
renderHouseInfo =() => {
  const  houseDetail  = this.state
  return <HouseInfo {...houseDetail}></HouseInfo>
}
// 小区地图
initMap = () =>{
  const {community, coord} = this.state
    /* 初始化地图 */
    const map = new BMap.Map('map') // 创建地图实例
    const point = new BMap.Point(coord.longitude, coord.latitude) // 创建点坐标
    map.centerAndZoom(point, 12) // 初始化地图，设置中心点坐标和地图级别
    map.addControl(new BMap.NavigationControl())
    // map.addControl(new BMap.OverviewMapControl());    
    // map.addControl(new BMap.ScaleControl());   
    // 地图覆盖物
    const opts = {
      position: point, // 指定文本标注所在的地理位置
      offset: new BMap.Size(26, -13) // 设置文本偏移量
  };
  // 创建文本标注对象
  const label = new BMap.Label(`<div class="${styles.map_red_rect}">
      <span>${community}</span>
      <span class="${styles.map_red_arrow}"></span>
    </div>`, opts);
  // 自定义文本标注样式
  label.setStyle({
    backgroundColor:'transparent',
    border:'none'
  });
  map.addOverlay(label);
}
// 小区地图
renderMap =() => {
  const {community} = this.state
  return (
    <div className={styles.map}>
      <div className={styles.title}>小区:{community}</div>
      <div id='map' className={styles.map_main}></div>
    </div>
  )
}
 // 渲染房源配置
 renderSupport = () => {
  const { supporting } = this.state
    return (
      <>
        <div className={styles.titles}>房源配套</div> 
        { <HouseSupport data={supporting}/> }
      </>
    )
 }
// 房源概况
renderDescription = () =>{
  const { description } = this.state
  return (
    <>
    <div className={styles.titles}>房源概况</div> 
    {<RenderDescription data={description}/>}
    </>
  )
}
  // 猜你喜欢
renderGuess = () => {
  console.log(this.state);
  const { guessData } = this.state
    return (
      <>
       <div className={styles.titles}>猜你喜欢</div> 
       <div className={styles.guess_list}>
        {guessData.map((item) => (
              <HouseLtem key={item.houseCode} {...item} />
            ))}
       </div>
      </>
    )
}
// 实现收藏
handleFavorite = async () => {
  const isAuth =  isLogin()
  const {id} = this.props.match.params
  if(isAuth){
    // console.log('实现收藏');
   const { isFavorite } = this.state
  //  如果已经收藏，点击就移除收藏
   if(isFavorite){
    await deleteFavoritesById(id)
   } else {
    await addFavoritesById(id)
   }
   this.setState({isFavorite:!isFavorite})
  } else {
    console.log('没有收藏');
    Modal.alert('提示', '登录后才能收藏房源，是否去登录?', [
      { text: '取消' },
      {
        text: '去登录',
        onPress: () => {
          this.props.history.push('/login')
        },
      },
    ])
  }
}
// 底部布局
renderBottom = () =>{
  const { isFavorite } = this.state
  return (
      <div className={styles.bottom}>
        <div className={styles.bottom_item} onClick={this.handleFavorite}>
          {isFavorite ? <>
            <img className={styles.bottom_icon_fav} src="http://localhost:8080/img/star.png" />
            <span>已收藏</span>
            </> :  <>
            <img className={styles.bottom_icon_fav} src="http://localhost:8080/img/unstar.png" />
            <span>收藏</span>
            </>}
        </div>
        <div onClick={() => Toast.info('功能升级中...', 2)} className={styles.bottom_item}>
          在线咨询
        </div>
        <a href="tel://10086" className={styles.bottom_item}>
          电话预约
        </a>
      </div>
  )
}
    render() {
      // 房屋详情页
      const { community,houseImg,supporting } = this.state
    return (
      <div>
        {/* 顶部导航 */}
        <MynavBar fistyle={2} mode='dark' rightContent={<i className="iconfont icon-share" />}>{community}</MynavBar>
        {/* 轮播图 */}
        { houseImg && this.renderCarousel()}
        {/* 房屋基本信息 */}
        {this.renderHouseInfo()}
        <WhiteSpace size="md" />
        {/* 小区地图 */}
        {this.renderMap()}
        <WhiteSpace size="md" />
        {/* 房源配套 */}
        {supporting.length !== 0  && this.renderSupport()}
        <WhiteSpace size="md" />
        {/* 房源概况 */}
        {this.renderDescription()}
        <WhiteSpace size="md" />
        {/* 猜你喜欢 */}
        {this.renderGuess()}
        <WhiteSpace size="md" />
        {/* 底部固定栏 */}
        {this.renderBottom()}
      </div>
    )
  }
}
